:root {
  /* Colors */
  --color-canvas-white: #ffffff;
  --color-ink: #101010;
  --color-charcoal: #000000;
  --color-muted-hard: #222222;
  --color-muted: #555555;
  --color-muted-soft: #999999;
  --color-border-soft: #c8c8c8;
  --color-border-subtle: #e0e0e0;

  /* Typography — Font Families */
  --font-soehne-mono: 'Soehne Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Typography — Scale */
  --text-caption: 10px;
  --leading-caption: 1.2;
  --tracking-caption: 0.8px;
  --text-label: 26px;
  --leading-label: 1.2;
  --tracking-label: 4.68px;
  --text-display: 54px;
  --leading-display: 1;
  --tracking-display: 1.35px;

  /* Typography — Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-5: 5px;
  --spacing-6: 6px;
  --spacing-8: 8px;
  --spacing-10: 10px;
  --spacing-11: 11px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-40: 40px;
  --spacing-80: 80px;

  /* Layout */
  --section-gap: 80px;
  --element-gap: 12px;

  /* Border Radius */
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-full: 999px;
  --radius-full-2: 9999px;

  /* Named Radii */
  --radius-cards: 8px;
  --radius-badges: 0px;
  --radius-inputs: 4px;
  --radius-buttons: 9999px;

  /* Surfaces */
  --surface-canvas: #ffffff;
  --surface-card: #ffffff;
  --surface-elevated-dark: #222222;
}